@import "ui";

#zhgl-map {
  .zhgl-map-container {}

  .zhgl-map-gis {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .zhgl-map-header {
    width: 100%;
    height: 72px;
    padding: 6px 16px;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: @header-shadow;
    z-index: 1;
  }

  .header-search {
    margin: 8px 0 0;
    float: left;
  }

  .header-admin {
    float: right;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
  }

  .header-admin-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: yellow;
  }

  .header-tab {
    float: right;
    margin: 20px 0 0;
  }

  .tab-mixin(@img1;@img2) {
    margin: 0;

    &::before {
      position: absolute;
      content: @img1;
      left: -3px;
    }

    &:hover {
      color: @main-blue;

      &::before {
        position: absolute;
        content: @img2;
      }
    }
  }

  .tab-list-span {
    position: relative;
    text-align: right;
    display: inline-block;
    width: 56px;
    transition: color 0.2s ease-in;
    color: @input-color;
    text-decoration: none;
  }

  .tab-li-data {
    .tab-mixin(url(../image/icon_data_normal.png),url(../image/icon_data_active.png));
  }

  .tab-li-analyse {
    .tab-mixin(url(../image/icon_analyse_normal.png),url(../image/icon_analyse_active.png));
  }

  .tab-li-oversee {
    .tab-mixin(url(../image/icon_oversee_normal.png),url(../image/icon_oversee_active.png));
  }

  .tab-li-special {
    .tab-mixin(url(../image/icon_special_normal.png),url(../image/icon_special_active.png));
  }

  .tab-active {
    .tab-list-span {
      color: @main-blue;
    }

    .tab-li-data {
      .tab-mixin(url(../image/icon_data_active.png),url(../image/icon_data_active.png))
    }

    .tab-li-analyse {
      .tab-mixin(url(../image/icon_analyse_active.png),url(../image/icon_analyse_active.png));
    }

    .tab-li-oversee {
      .tab-mixin(url(../image/icon_oversee_active.png),url(../image/icon_oversee_active.png));
    }

    .tab-li-special {
      .tab-mixin(url(../image/icon_special_active.png),url(../image/icon_special_active.png));
    }
  }

  .zhgl-map-box (@left;@top;@width) {
    position: absolute;
    left: @left;
    top: @top;
    width: @width;
    border-radius: 4px;
    box-shadow: @map-shadow;
  }

  .zhgl-map-handle {
    position: absolute;
    left: 16px;
    top: 84px;
    width: 448px;
    z-index: 1;
  }

  .zhgl-map-tab {
    background: white;
    height: 40px;
    font-size: @large-font;
    box-shadow: @map-shadow;
    font-family: @heiti;
    border-radius: 4px;

    ul {
      padding: 7px 0 0;
    }

    li {
      width: 110px;
      height: 26px;
      line-height: 26px;

      &:hover {
        color: @main-blue;
      }

      &::after {
        height: 26px;
      }
    }
  }

  .zhgl-map-info {
    margin: 8px 0 0;
    border-radius: 4px;
  }

  .info-header {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    background: white;
    border-radius: 4px 4px 0 0 ;
    box-shadow: @map-shadow;

    .info-header-container {
      float: left;

      > span {
        font-size: 16px;
        color: @main-blue
      }
    }

    .tab-list {
      float: left;
      font-size: 12px;
      margin: 13px 0 0;

      li {
        width: 75px;
        height: 26px;

        &::after {
          display: none;
        }

        &:hover {
          color: @main-blue;
        }
      }
    }

    .tab-active {
      border-bottom: 2px solid @main-blue;
    }
  }

  .info-header-title {
    font-size: 16px;
    color: @main-blue;
    display: inline-block;
    margin: 8px 0 0 10px;
    font-family: @heiti;
  }

  .info-header-down {
    float: right;
    padding: 8px 4px 0 0;
    cursor: pointer;
  }

  .info-content {
    padding: 8px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background: white;
    border-radius: 0 0 4px 4px;
    box-shadow: @map-shadow;
  }

  .info-content-chart {
    min-height: 170px;
    border-bottom: @base-dashed;
    margin: 0 0 12px;
    position: relative;
    padding-bottom: 8px;
  }

  .form-group-control {
    display: inline-flex;
    margin: 0 -10px 0 0;
    width: 322px;
    .form-control {
      margin: 0 10px 0 0;
      &:last-child {
        margin:0;
      }
    }
    .row-time-input {
      width: 100%;
      margin: 0;
    }
    .search-input {
      flex:1 0 auto;
    }
  }

  .form-inline-group {
    display: inline-block;

    .form-control {
      display: inline-block;
    }
  }

  .info-content-filter {
    padding: 0 ;
    border-bottom: @base-border;
    margin: 0 0 12px;
  }

  .info-content-filter-result {
    min-height: 48px;
    width: 100%;
    border: 1px dashed @main-blue;
    background: @case-color-opacity;
    margin: 0 0 12px;
    padding: 6px 8px 0;
    font-size: @base-font;

    > div {
      margin: 0 0 6px;
    }

    .search-result-span {
      margin: 0 4px 0 0;
      color: @main-blue;

      &::before {
        content: "#";
      }

      &::after {
        content: "#";
      }
    }
  }

  .chart-header {
    p {
      font-size: @large-font;
      font-family: @heiti;
      float: left;
    }
    p+span {
      margin:0 0 0 16px;
    }
    .chart-header-select {
      min-width: 100px;
      float: right;
      height: 24px;

      select {
        width: 100px;
        height: 24px;
        font-size: 12px;
        padding: 2px 12px;
        display: inline-block;
        margin:0 0 0 12px;
      }
    }
  }

  .check-detail {
    color: @main-blue;
    position: absolute;
    bottom: 10px;
    right: 0;
    cursor: pointer;
  }

  .search-result-list {
    margin: 0;
    padding: 0;
    list-style: none;

    .search-result-li {
      min-height: 80px;
      width: 100%;
      padding: 0 0 0 42px;
      position: relative;

      .search-mark {
        position: absolute;
        top: 8px;
        left: 0;
        width: 30px;
        height: 30px;

        .search-index {
          color: white;
          position: absolute;
          left: 10px;
          top: 1px;
        }
      }

      &:hover {
        background: #e8f3fb;
      }

      header {
        color: @main-blue;
        font-size: @base-font;
        padding: 8px 0 0;
      }

      article {
        padding: 8px 0 0;
        font-size: @base-font;

        div {
          margin: 0 0 8px;
        }
      }
    }
  }

  .search-result-header {
    height: 46px;
    line-height: 46px;

    p {
      display: inline-block;
      font-family: @heiti;
      font-size: @large-font;
    }

    span {
      font-size: @base-font;
      margin: 0 0 0 14px;
    }

    .search-back {
      display: inline-block;
      color: @main-blue;
      cursor: pointer;
    }
  }

  .zhgl-panel {
    position: absolute;
    left: 0;
    top: 120px;
    height: 400px;
    width: 700px;
    margin-left: 500px;
    overflow: hidden;
  }

  .map-table-container {
    border-radius: 3px;
    overflow: hidden;
  }

  .map-table {
    width: 100%;
    background: #edf1f3;
    border: 1px solid #d6dee2;
    text-align: center;
    border-radius: 3px;
    th {
      text-align: center;
    }

    thead {
      border-bottom: 1px solid #d6dee2;
      font-size: 12px;

      tr {
        height: 34px;
      }
    }

    a {
      color: @main-blue;
      text-decoration: underline;
    }

    tbody {
      font-size: 12px;
      tr {
        height: 32px;
      }
    }
  }
}
